<template>
  <div class="home">
    <el-card shadow="never">
      <div id="orders_back">
        <span>
          <el-button round size="mini" icon="el-icon-arrow-left" @click="back"
            >返回</el-button
          ></span
        >
      </div>
      <div id="user_detail">
        <div id="user_header">
          <div id="user_photo">
            <el-avatar
              id="user_photo1"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div>
          <p id="user_number">159888888</p>
          <p id="user_Vip">
            <el-tag
              size="mini"
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              effect="dark"
            >
              {{ item.label }}
            </el-tag>
          </p>
        </div>
        <div id="user_detail_table">
          <table>
            <tr>
              <th>用户ID</th>
              <td>222</td>
              <th>注册时间</th>
              <td>2020</td>
            </tr>
            <tr>
              <th>昵称</th>
              <td>222</td>
              <th>生日</th>
              <td>2222</td>
            </tr>
            <tr>
              <th>性别</th>
              <td>222</td>
              <th>职业</th>
              <td>2222</td>
            </tr>
            <tr>
              <th>手机</th>
              <td></td>
              <th>健身经验</th>
              <td>2222</td>
            </tr>
            <tr>
              <th>城市</th>
              <td>222</td>
              <th>健身目的</th>
              <td>2222</td>
            </tr>
          </table>
        </div>
      </div>
      <div id="Statistics_inf_heaer">
        <span>统计信息</span>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="Consumption_amount" label="消费总金额">
          </el-table-column>
          <el-table-column prop="Consumption_month" label="本月消费">
          </el-table-column>
          <el-table-column
            prop="Number_of_classes_this_month"
            label="本月上课数"
          >
          </el-table-column>
          <el-table-column prop="coupon" label="优惠券（张）">
          </el-table-column>
          <el-table-column prop="Effective_vip_card" label="有效会员卡">
          </el-table-column>
        </el-table>
      </div>

      <div id="vip_inf_heaer">
        <span>会员卡信息</span>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="vip_card" label="会员卡">
          </el-table-column>
          <el-table-column prop="balance" label="余额"> </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <!-- <template slot-scope="scope"> -->
            <template>
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              <!-- <el-button type="text" size="small" @click="dialogTableVisible = true">明细</el-button> -->
              <el-button type="text" @click="dialogTableVisible1 = true" >明细</el-button >
              <el-button type="text" @click="dialogTableVisible2 = true" >续费</el-button >
              <el-button type="text" @click="dialogTableVisible3 = true" >扣费</el-button >
              <el-button type="text" @click="dialogTableVisible4">停用</el-button >
            </template>
          </el-table-column>
        </el-table>
      </div>

<!-- 消费明细的弹框     -->
        <el-dialog
          :append-to-body="true"
          title="消费明细"
          :visible.sync="dialogTableVisible1" center>
         <div id="detailed">
          <div class="p1">
            <el-table :data="detailed1" border :header-cell-style="getRowClass" >
              <el-table-column
                property="vip_card"
                label="会员卡："
               align="center"
              ></el-table-column>
              <el-table-column property="surplus" label="剩余：" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="p2">
            <el-table :data="detailed2" border :header-cell-style="getRowClass">
              <el-table-column
                property="Records_of_consumption"
                label="消费记录"
                align="center"
              ></el-table-column>
              <el-table-column
                property="time"
                label="时间" 
                align="center"
              ></el-table-column>
            </el-table>
<!-- 分页 -->
            <el-pagination id="pading" background  layout="prev, pager, next" :total="1000">
            </el-pagination>
            <div slot="footer" class="dialog-footer"  >
              <el-button @click="dialogTableVisible1=false " size="mini">取 消</el-button>
              <el-button type="primary" @click="dialogTableVisible1=false " size="mini">确 定</el-button>
             </div>
          </div>
          </div>
      </el-dialog>

<!-- 续费的弹框     -->
        <el-dialog
          :append-to-body="true"
          title="续费"
          :visible.sync="dialogTableVisible2" center>
         <div id="detailed">
          <div class="p1">
            <el-table :data="detailed1" border :header-cell-style="getRowClass" >
              <el-table-column
                property="vip_card"
                label="会员卡："
               align="center"
              ></el-table-column>
              <el-table-column property="surplus" label="剩余：" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="p2">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="续费" prop="renew">
                <el-input v-model="ruleForm.renew"  placeholder="输入续费金额  元"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="ruleForm.remarks"></el-input>
              </el-form-item>
              </el-form>
<!-- 分页 -->
            <div slot="footer" class="dialog-footer"  >
              <el-button @click="dialogTableVisible2=false " size="mini">取 消</el-button>
              <el-button type="primary" @click="dialogTableVisible2=false " size="mini">确 定</el-button>
             </div>
          </div>
          </div>
      </el-dialog>
      
<!-- 续费的弹框     -->
        <el-dialog
          :append-to-body="true"
          title="续费"
          :visible.sync="dialogTableVisible3" center>
         <div id="detailed">
          <div class="p1">
            <el-table :data="detailed1" border :header-cell-style="getRowClass" >
              <el-table-column
                property="vip_card"
                label="会员卡："
               align="center"
              ></el-table-column>
              <el-table-column property="surplus" label="剩余：" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="p2">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="续费" prop="renew">
                <el-input v-model="ruleForm.renew"  placeholder="输入续费金额  元"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="ruleForm.remarks"></el-input>
              </el-form-item>
              </el-form>
<!-- 分页 -->
            <div slot="footer" class="dialog-footer"  >
              <el-button @click="dialogTableVisible3=false " size="mini">取 消</el-button>
              <el-button type="primary" @click="dialogTableVisible3=false " size="mini">确 定</el-button>
             </div>
          </div>
          </div>
      </el-dialog>
     

      <div id="vip_inf_heaer">
        <span>收货地址</span>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="Tel" label="手机号码"> </el-table-column>
          <el-table-column prop="address" label="详细地址"> </el-table-column>
          <el-table-column prop="Postal_Code" label="邮编编码">
          </el-table-column>
          <el-table-column prop="Default_address" label="默认地址">
          </el-table-column>
        </el-table>
      </div>

      <div id="vip_inf_heaer">
        <span>订单记录</span>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="Order_number" label="订单编号">
          </el-table-column>
          <el-table-column prop="Submission_time" label="提交时间">
          </el-table-column>
          <el-table-column prop="User_number" label="用户账号">
          </el-table-column>
          <el-table-column prop="Order_amount" label="订单金额">
          </el-table-column>
          <el-table-column prop="Payment_method" label="支付方式">
          </el-table-column>
          <el-table-column prop="Order_source" label="订单来源">
          </el-table-column>
          <el-table-column prop="Order_status" label="订单状态">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页       -->
      <p class="paging">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </p>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
#orders_back {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
#user_detail {
  width: 100%;
  display: flex;
  #user_header {
    width: 240px;
    height: 225px;
    background: #eeeff2;
    #user_photo {
      #user_photo1 {
        margin-top: 20px;
        width: 100px;
        height: 100px;
      }
    }
    #user_number {
      margin-top: 5px;
    }
    #user_Vip {
      margin-top: 10px;
    }
  }
  #user_detail_table {
    table {
      width: 100.01%;
      border-collapse: collapse;
      height: 225px;
      tr {
        th {
          width: 120px;
          background: #eeeff2;
          font-size: 12px;
          color: #333333;
          border: 1px solid rgb(223, 225, 232);
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
        }
        td {
          width: 300px;
          border: 1px solid rgb(223, 225, 232);
          font-size: 12px;
          padding: 10px;
          text-align: left;
        }
      }
    }
  }
}
#Statistics_inf_heaer {
  width: 100.01%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: #eeeff2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  span {
    padding-left: 20px;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #999999;
  }
}
#Statistics_inf_body {
  table {
    width: 100%;
    border-collapse: collapse;
    tr {
      th {
        height: 40px;
        width: 108px;
        background: #eeeff2;
        font-size: 12px;
        color: #333333;
        border: 1px solid rgb(223, 225, 232);
      }
      td {
        border: 1px solid rgb(223, 225, 232);
        height: 40px;
        font-size: 12px;
        color: #333333;
        a {
          text-decoration: none;
        }
      }
    }
  }
}
#vip_inf_heaer {
  width: 100.01%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: #eeeff2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  span {
    padding-left: 20px;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #999999;
  }
}
#vip_inf_body {
  table {
    width: 100%;
    border-collapse: collapse;
    tr {
      th {
        height: 40px;
        width: 108px;
        background: #eeeff2;
        font-size: 12px;
        color: #333333;
        border: 1px solid rgb(223, 225, 232);
      }
      td {
        border: 1px solid rgb(223, 225, 232);
        height: 40px;
        font-size: 12px;
        color: #333333;
        a {
          text-decoration: none;
        }
      }
    }
  }
}
// 分页
.paging {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  .grid-content {
    align-items: center;
    .el-pagination {
      margin-top: 10px;
      height: 50px;
      line-height: 50px;
    }
  }
}
el-pagination {
  text-align: right;
}
#detailed{
  width:500px;
  margin: 0 auto;
    .p1{
      height: 120px; 
    }
    .p2{
      margin-bottom: 15px;
      #pading{
        text-align: center;
        margin-top: 15px;
    }
     .dialog-footer{
       border-top:1px solid rgb(223, 225, 232);
       margin-top: 20px;
       padding-top: 15px;
        display: flex;
        justify-content:flex-end
      } 
  }
}
  
</style>
<script>
export default {
  data() {
    return {
      items: [{ type: "danger", label: "一般会员" }],
      tableData: [
        {
          // 统计信息
          Consumption_amount: "200", //消费总金额
          Consumption_month: "100", //本月消费
          Number_of_classes_this_month: "1", //本月上课数
          coupon: "1", //优惠券
          Effective_vip_card: "1", //有效会员卡
          // 会员卡信息
          vip_card: "教练私教课程", //会员卡
          balance: "22次", //余额
          state: "正常", //状态
          // 收货地址
          name: "王小虎", //姓名
          Tel: "159****5311", //手机号码
          address: "福州台江区鳌峰路", //详细地址
          Postal_Code: "518000", //邮编编码
          Default_address: "开启", //默认地址

          // 订单记录
          Order_number: "202007196398345", //订单编号
          Submission_time: "2020-07-19 14:48:38", //提交时间
          User_number: "159****5311", //用户账号
          Order_amount: "¥200.00", //订单金额
          Payment_method: "未支付", //支付方式
          Order_source: "APP订单", //订单来源
          Order_status: "待付款", //订单状态
        },
      ],
// 消费明细表
      detailed1: [
        {
          vip_card: "储值卡片", //会员卡
          surplus: "1000.00元", //剩余
        },
      ],
      detailed2: [
        {
          Records_of_consumption: "全身极速燃脂",  //消费记录
          time: "2016-05-04",
        },
        {
          Records_of_consumption: "全身极速燃脂",  //消费记录
          time: "2016-05-04",
        },
        {
          Records_of_consumption: "全身极速燃脂",  //消费记录
          time: "2016-05-04",
        },
        {
          Records_of_consumption: "全身极速燃脂",  //消费记录
          time: "2016-05-04",
        },
      ],
// 续费的弹框
      ruleForm:{
        renew:'' ,//续费
        remarks:'' //备注
      },
      rules: {
        renew:[
          {required: true, message: '请输入续费金额', trigger: 'change'}
        ]
      },

      dialogTableVisible1: false,
      dialogTableVisible2: false,
      dialogTableVisible3: false,
      // dialogTableVisible4: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    back() {
      this.$router.push("processingorderst");
    },
    handleClick(row) {
      console.log(row);
      this.$router.push("processingorderst");

    },
// 表头设置颜色
    getRowClass ({ rowIndex }) {
      if (rowIndex == 0) {
        return 'background:RGB(238, 239, 246, 0.34)'
      } else {
        return ''
      }  
    },
    // dialogFormVisible1_f(){
    //   this.dialogTableVisible1=false
    // }  
 
// 会员卡信息里的停用 
    dialogTableVisible4(){
      this.$confirm('确定要停用该会员卡吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
};

</script>